<template>
  <div class="container" ref="container">
    <a-space class="operator">
      <a-button @click="back" type="primary">返回上一页</a-button>
    </a-space>
    <div class="spreadsheet">
      <div id="x-spreadsheet-demo"></div>
    </div>
  </div>
</template>

<script>
import Spreadsheet from "x-data-spreadsheet";
import zhCN from 'x-data-spreadsheet/src/locale/zh-cn';
import {getComputer} from '@/api/modules/list'

export default {
  data() {
    return {
      computerUserList:[]
    }
  },
  props:{
    
  },
  created() {
    
  },
  mounted() {
    let params = {
      page:1,
      limit:99999,
    }
    getComputer(params).then((e) => {
      this.computerUserList = e.data.data
      this.init()
    }).catch(() => {
      
    });
  },    
  methods: {
    init(){
      Spreadsheet.locale('zh-cn', zhCN);
      const s = new Spreadsheet("#x-spreadsheet-demo",{
        view: {
          width: () => {
            if(this.$refs.container){
              return Number(this.$refs.container['clientWidth']);
            }
          },
          height: () => 600
        },
        showBottomBar: false,
      })
      .loadData({}) // load data
      .change(data => {
        console.log('Spreadsheet-data',data)
        // save data to db
      });
      // data validation
      s.validate()
      this.setList(s)
      this.setHeader(s)
    },
    setHeader(s){
      //Excel头部数据配置
      s.cellText(0, 0, '用户名').cellText(0, 1, '一级部门').cellText(0, 2, '二级部门').cellText(0, 3, '设备名')
      .cellText(0, 4, '机型').cellText(0, 5, '配置').cellText(0, 6, 'cpu').cellText(0, 7, '主板')
      .cellText(0, 8, '内存').cellText(0, 9, '显卡').cellText(0, 10, '硬盘').cellText(0, 11, 'ssd')
      .cellText(0, 12, '显示器').cellText(0, 13, '键盘').cellText(0, 14, '鼠标').cellText(0, 15, '其他')
      .cellText(0, 16, '用户备注')
      .reRender();
    },
    setList(s){
      //把数据显示到Excel
      let computerUserList = this.computerUserList
      // console.log(this.computerUserList)
      for(let idx in this.computerUserList){
        s.cellText(parseInt(idx)+1, 0, `${computerUserList[idx]['name']}`)
        .cellText(parseInt(idx)+1, 1, `${computerUserList[idx]['firstname']}`)
        .cellText(parseInt(idx)+1, 2, `${computerUserList[idx]['secondname']}`)
        .cellText(parseInt(idx)+1, 3, `${computerUserList[idx]['computername']}`)
        .cellText(parseInt(idx)+1, 4, `${computerUserList[idx]['jixing']}`)
        .cellText(parseInt(idx)+1, 5, `${computerUserList[idx]['peizhi']}`)
        .cellText(parseInt(idx)+1, 6, `${this.getPeijianName(computerUserList[idx]['id'],computerUserList[idx]['cpu'])}`)
        .cellText(parseInt(idx)+1, 7, `${this.getPeijianName(computerUserList[idx]['id'],computerUserList[idx]['zhuban'])}`)
        .cellText(parseInt(idx)+1, 8, `${this.getPeijianName(computerUserList[idx]['id'],computerUserList[idx]['neicun'])}`)
        .cellText(parseInt(idx)+1, 9, `${this.getPeijianName(computerUserList[idx]['id'],computerUserList[idx]['xianka'])}`)
        .cellText(parseInt(idx)+1, 10, `${this.getPeijianName(computerUserList[idx]['id'],computerUserList[idx]['yingpan'])}`)
        .cellText(parseInt(idx)+1, 11, `${this.getPeijianName(computerUserList[idx]['id'],computerUserList[idx]['ssd'])}`)
        .cellText(parseInt(idx)+1, 12, `${this.getPeijianName(computerUserList[idx]['id'],computerUserList[idx]['xianshiqi'])}`)
        .cellText(parseInt(idx)+1, 13, `${this.getPeijianName(computerUserList[idx]['id'],computerUserList[idx]['jianpan'])}`)
        .cellText(parseInt(idx)+1, 14, `${this.getPeijianName(computerUserList[idx]['id'],computerUserList[idx]['shubiao'])}`)
        .cellText(parseInt(idx)+1, 15, `${this.getPeijianName(computerUserList[idx]['id'],computerUserList[idx]['qita'])}`)
        .cellText(parseInt(idx)+1, 16, `${computerUserList[idx]['remark']}`)
        .reRender();
      }
    },
    getPeijianName(id,peijian_id){
      if(!peijian_id){return '无'}
      let peijianList = this.computerUserList.find(e=>e.id==id).peijianList || []
      let peijian = peijianList.filter(e=>peijian_id.indexOf(`,${e.id},`) != -1)
      if(peijian.length > 0){
        let text = ''
        for(let item of peijian){
          text = text + item.name
        }
        // text = text.substring(0,text.length-1)
        return text
      }else{
        return '无'
      }
    },
    back(){
      this.$emit('update:mod','normal')
    },
  },
}
</script>

<style scoped>
  .spreadsheet{
    margin-top: 24px;
  }
</style>